<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <!--内核渲染器-->
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
    <!--IE8/9及以后的版本都会以最高版本IE来渲染页面-->
    <meta name="format-detection" content="telephone=no">
    <!--手机号不被显示为拨号连接-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>出版物详情</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
    <!--<link rel="stylesheet" href="__PUBLIC__static/portal/css/bootstrap.min.css">-->
    <link href="https://cdn.bootcss.com/iview/2.4.0/styles/iview.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iview.css" charset="UTF-8">-->
    <link href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css" rel="stylesheet">
    <!--<link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/swiper.min.css">-->
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/base.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/footer.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/font.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/iconfont(1).css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/search.css">

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/jquery-1.11.3.min.js"></script>-->
    <script src="__PUBLIC__static/portal/js/jquery.cookie.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/bootstrap.min.js"></script>-->
    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/vue.js" charset="UTF-8"></script>-->
    <script src="https://cdn.bootcss.com/iview/2.4.0/iview.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/iview.min.js" charset="utf-8"></script>-->
    <script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.min.js"></script>
    <!--<script src="__PUBLIC__static/portal/js/swiper.min.js"></script>-->
    <script src="__PUBLIC__static/portal/js/common.js"></script>

    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/detail.css">
    <link rel="stylesheet" type="text/css" href="__PUBLIC__static/portal/css/cssAuto.css">

    <style>
        .fontSize {
            font-size: 0.2rem;
        }
        .fontSize2 {
            font-size: 0.15rem;
        }
        .fontSize3 {
            font-size: 0.15rem;
        }

        .pagination > li > a,
        .pagination > li > span {
            padding: 0.1rem 0.2rem;
            font-size: 0.15rem;
        }

        hr.style-seven {
            overflow: visible; /* For IE */
            height: 30px;
            border-style: solid;
            border-color: black;
            border-width: 1px 0 0 0;
            border-radius: 20px;
        }
        hr.style-seven:before { /* Not really supposed to work, but does */
            display: block;
            content: "";
            height: 30px;
            margin-top: -31px;
            border-style: solid;
            border-color: black;
            border-width: 0 0 1px 0;
            border-radius: 20px;
        }
    </style>
</head>

<body>
{include file="layout/head" /}

{include file="layout/search" /}

<div id="detail" class="warp">
    <div class="detl-top detail_fl fl">
        <div class="bigImg" style="background: url('__PUBLIC__static/portal/img/bg/bg1.png');">
            {if condition="strpos($book['cover'],'http')===false"}
            <img src="__PUBLIC__{$book['cover']}" title="{$book['name']}" alt="{$book['name']}" id="bigimg" class="book-img-shadow">
            {else/}
            <img src="{$book['cover']}" title="{$book['name']}" alt="{$book['name']}" id="bigimg" class="book-img-shadow">
            {/if}
        </div>
        <div class="slideBanner">
            <div class="swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper bookList">
                    <div bgimg="__PUBLIC__static/portal/img/bg/bg1.png" class="swiper-slide item swiper-slide-active"
                         style="width: 138.667px; margin-right: 20px; background: url('__PUBLIC__static/portal/img/bg/bg1.png');">
                        {if condition="strpos($book['cover'],'http')===false"}
                        <img src="__PUBLIC__{$book['cover']}" alt="{$book['name']}" class="book-img-shadow">
                        {else/}
                        <img src="{$book['cover']}" alt="{$book['name']}" class="book-img-shadow">
                        {/if}
                    </div>
                    {if condition="$book['img']"}
                        {if condition="strpos($book['img'],'http')===false"}
                            <div class="swiper-slide item item-white" style="width: 138.667px; margin-right: 20px;">
                                <img src="__PUBLIC__{$book['img']}" alt="{$book['name']}"
                                     class="book-img-white">
                            </div>
                        {else/}
                            <div class="swiper-slide item item-white" style="width: 138.667px; margin-right: 20px;">
                                <img src="{$book['img']}" alt="{$book['name']}"
                                     class="book-img-white">
                            </div>
                        {/if}
                    {/if}
                </div>
            </div>
            <div class="swiper-button-prev swiper-button-disabled"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
    <div class="detl-top detail_fr fr">
        <div class="info">
            <p class="book-name font-max">{$book['name']}</p>
            <p class="book-author color-base3">{$book['author']} 编著</p>
            <p class="book-summary font-min">{$book['keyContent']}</p>
        </div>
        <div class="key_attr">
            <p style="margin-bottom: 50px;">
                    <span class="price-p">￥
                        <span class="price">{$book['price']}</span>
                    </span>
                <span>
                        <span style="margin-left: 20px; font-size: 14px; color: rgb(255, 101, 0); margin-right: 20px;">[
                            <span>8.0</span>折]</span>
                        [
                        <s style="font-size: 14px;">定价:{$book['price'] / 8 * 10}元</s>]
                    </span>
            </p>
            <dl>
                <dt>数量</dt>
                <dd>
                    <div class="count">
                        <span v-on:click="no_minus" class="btn no_minus">-</span>
                        {if condition="$user['type'] == 1"}
                        <input type="number" value="100" min="100" step="1" name="quantity" id="quantity" onafterpaste="return false"
                               v-model="quantity" class="amount" style="height: 32px; line-height: 32px;">
                        {else /}
                        <input type="number" value="1" min="1" step="1" name="quantity" id="quantity" onafterpaste="return false"
                               v-model="quantity" class="amount" style="height: 32px; line-height: 32px;">
                        {/if}
                        <span v-on:click="plus" class="btn plus">+</span>
                    </div>
                    <!---->
                </dd>
            </dl>
            <dl>
                <dt class="cart-dt">购买</dt>
                <dd>
                    <a href="javascript:void(0);" v-on:click="addCart" class="cart-btn">立即购买</a>
                    <!---->
                </dd>
            </dl>
            <dl>
                <dt>客服</dt>
                <dd>
                    <!--<i class="icon iconfont_24"></i>-->
                    <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=1309603684&site=qq&menu=yes">
                        <img border="0" src="__PUBLIC__static/portal/img/QQ.png" alt="联系客服" title="联系客服"/>
                    </a>
                </dd>
            </dl>
            {if condition="$book['data']"}
            <dl>
                <dt>下载</dt>
                <dd>
                    <a class="btn btn-info" href="{$book['data']}" target="_blank" style="font-size: 0.16rem;">
                        <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span>
                        随书资料
                    </a>
                    <!---->
                </dd>
            </dl>
            {/if}
        </div>
    </div>
    <div class="book-detail-other">
        <ul class="tab">
            <li class="active">图书详情</li>
            <li>图书目录</li>
            <!---->
            <li>内容简介</li>
            <li>作者简介</li>
        </ul>
        <ul class="tab-con">
            <li class="active">
                <table class="bookBaseInfo">
                    <tbody>
                    <tr>
                        <td width="25%">ISBN：{$book['ISBN']}</td>
                        <td width="25%">语种：中文版</td>
                        <td width="25%">包装：平装</td>
                    </tr>
                    <tr>
                        <td>开本：{$book['size']}</td>
                        <td>出版时间：{$book['date']}</td>
                        <td>页数：{$book['pages']}</td>
                    </tr>
                    </tbody>
                </table>
                <div class="mobile-con">
                    <p>ISBN：{$book['ISBN']}</p>
                    <p>语种：中文版</p>
                    <p>包装：平装</p>
                    <p>开本：{$book['size']}</p>
                    <p>页数：{$book['pages']}</p>
                </div>
            </li>
            <li>
                <div id="myarticle" class="catalog_box">
                    <div><p>{$book['bookDir']}</p></div>
                </div>
            </li>
            <!---->
            <li>
                <div>
                    <p>
                        {$book['describe']}
                    </p>
                </div>
            </li>
            <li>
                <div>
                    <p>
                        {$book['authorDescribe']}
                    </p>
                </div>
            </li>
        </ul>
    </div>

    <div>
        <div class="row">
            <div class="col-lg-4">
                <ul class="list-group">
                    <li class="list-group-item">
                        <span class="badge list-group-item-success">{$evaluation->total()}</span>
                        这里已经有很多评论啦！
                    </li>
                </ul>
            </div>
        </div>

        {foreach $evaluation as $eval}
        <div class="media">
            <div class="media-left">
                <img class="media-object" src="__PUBLIC__static/portal/img/head/head{:mt_rand(1,10)}.png">
                <h4 class="text-center fontSize3">{$eval.name | hiddenName}</h4>
            </div>
            <div class="media-body">
                <!--<h4 class="media-heading">{$eval.name}</h4>-->
                <br>
                <p>
                    <span class="fontSize">级别:</span>
                    {for start='0' end='$eval.star'}
                    <img class="icon" height="30" src="__PUBLIC__static/portal/img/head/star_icon.png">
                    {/for}
                </p>
                <br><br>
                <p class="fontSize2">
                    <b class="text-muted">评论:</b>
                    <span>{$eval.content}</span>
                </p>
                <br><br><br>
                <p class="text-right">{$eval.etime}</p>
                <br><br>
                <hr class="style-seven">
            </div>
        </div>
        {/foreach}

        <div class="text-center">
            {$evaluation->render()}
        </div>
    </div>

    <div class="book-floor">
        <div class="floor-name">
            <h2 class="font-max font-size-h2">推荐图书
                <span class="line line-fl"></span>
                <span class="line line-fr"></span>
            </h2>
        </div>
        <ul class="bookList">
            {foreach $rand as $value}
            <li class="item" title="{$value.name}">
                <a href="{:url('index/index/getBook',['cid' => $cid, 'bookId' => $value.id])}"
                   style="background:url(__PUBLIC__static/portal/img/bg/bg{:mt_rand(1, 7)}.png)">
                    {if condition="strpos($value.cover,'http')===false"}
                    <img class="book-img-shadow"
                         src="__PUBLIC__{$value.cover}" style="display: inline;">
                    {else/}
                    <img class="book-img-shadow"
                         src="{$value.cover}" style="display: inline;">
                    {/if}
                </a>
                <p>
                    <a href="{:url('index/index/getBook',['cid' => $cid, 'bookId' => $value.id])}">{$value.name}</a>
                </p>
                <p>
                    <a href="{:url('index/index/getBook',['cid' => $cid, 'bookId' => $value.id])}">￥{$value.price}</a>
                </p>
            </li>
            {/foreach}
        </ul>
    </div>
</div>
{include file="layout/foot" /}

{include file="layout/goback" /}

<script>
    $(function () {
        $.each($('img'), function (index, item) {
            var width = $(item).attr('width');
            var height = $(item).attr('height');
            if (width != 'undefined' && width != '100%') {
                $(item).css({
                    'width': width + 'px',
                    'height': height + 'px'
                });
            }
        });

        var swiper = new Swiper('.swiper-container', {
            slidesPerView: 3,
            spaceBetween: 20,
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev'
        });

        $('.item').click(function () {
            var src = $(this).children()[0].src;
            var name = $(this).children()[0].className;

            $('#bigimg')[0].src = src;
            console.log(name);

            if (name != 'book-img-shadow') {
                $('.bigImg > img').removeClass('book-img-shadow').addClass('book-img-white');
                $('.bigImg').css('background', '');
            } else {

                $('.bigImg > img').removeClass('book-img-white').addClass('book-img-shadow');
                $('.bigImg').css('background', 'url(\'__PUBLIC__static/portal/img/bg/bg1.png\')');
            }
        });

        $('.tab > li').click(function () {
            $('.tab > li').removeClass('active');
            $('.tab-con > li').removeClass('active');

            $(this).addClass('active');

            $('.tab-con > li').eq($('.tab > li').index(this)).addClass('active');
        });


    });
    var bookId = {$book['id']};
    {if condition="$user['type'] == 1"}
        var quantity = 100;
    {else /}
        var quantity = 1;
        {/if}
    var book = new Vue({
        el: "#detail",
        data: {
            'bookId': bookId,
            'quantity': quantity,
        },
        methods: {
            'no_minus': function () {
                var quan = parseInt(this.quantity);
                if (quan > 100) {
                    this.quantity = quan - 1;
                }
            },
            'plus': function () {
                this.quantity = parseInt(this.quantity) + 1;
            },
            addCart: function () {
                var _this = this;
                var user = "{$user.id}";
                if (!user) {
                    window.location.href = "{:url('index/login/index')}";
                    return;
                }
                if (_this.quantity < quantity) {
                    _this.quantity = 100;
                }

                $.ajax({
                    type: 'POST',
                    url: '{:url("index/shop/addCart")}',
                    data: {
                        'bookId':_this.bookId,
                        'quantity':_this.quantity
                    },
                    dataType: 'json',
                    async: true,
                    success: function (res) {
                        if (res.status) {
                            window.location.href = "{:url('index/shop/cart')}";
                        }
                    },
                    error: function (msg) {
                        console.log(msg);
                    }
                });
            }
        }
    });

</script>

</body>

</html>